<template>
  <div class="chat-login">
    <input-group>
      <ec-input 
        type="text" 
        label="账号"
        v-model="username"
        placeholder="请输入账号">
      </ec-input>
      <ec-input 
        type="password" 
        v-model="password"
        label="密码" 
        placeholder="请输入账号密码">
      </ec-input>
    </input-group>
    <ec-button 
      text="登录"
      @click.native="login()"
      ></ec-button>
    <!-- <a href="">忘记密码？</a> -->
  </div>
</template>

<script>
import {
  mapActions
} from 'vuex';

// custom components
import Input from '@/components/Input';
import InputGroup from '@/components/InputGroup';
import Button from '@/components/Button';

// chat api
import {
  checkLogin
} from '@/api/chat';

export default {
  name: 'line',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  components: {
    'EcInput': Input,
    'EcButton': Button,
    InputGroup
  },
  methods: {
    ...mapActions('chat/bottomNavigator', [
      'showBottomNav'
    ]),
    ...mapActions('chat/messageBottomInput', [
      'showMessageInput'
    ]),
    ...mapActions('chat', [
      'comeMessage',
      'comeWait',
      'setAvigatorNumber'
    ]),
    login() {
      checkLogin({
        username: this.username,
        password: this.password,
        vue: this
      });
    }
  },
  activated () {
    this.showMessageInput(false);
    this.showBottomNav(false);
  }
};
</script>


<style lang="scss" scope>
  @import '../../assets/style/config';
  @import '../../assets/style/mixins/common';
  .chat-login{
    padding:0 2rem;
    padding-top:20%;
    .input-group{
      border-radius: 4px;
      overflow: hidden;
    }
    a{
      font-size:1.2rem;
      text-align:right;
      display:block;
      margin-top:1rem;
      overflow: hidden;
    }
    button{
      margin-top:1.6rem;
    }
  }
</style>
